<%@ page pageEncoding="UTF-8"%>
<script type="text/x-template" id="send_message_select">
    <div id="send_single_selected">
        <img class="show-block" src="../../images/palace/message/arrow-down2.png">
        <div class="selected" @click="openSelect($event)" v-html="getValue(choosed)"></div>
        <div class="selected-detail none">
            <div class="notify-level" v-for="i in memberlist" v-html="getValue(i)" @click="chooseMember(i, $event)"></div>
        </div>
    </div>
</script>

<script>
    var sendSingleSelected = {
        template: "#send_message_select",
        props: ["memberlist", "choosed", "key", "value"],
        methods: {
            getValue: function(obj) {
                return this.key ? obj[this.key] : obj;
            },
            openSelect: function(event) {
                var target = event.target;
                target.parentNode.querySelector(".selected-detail").classList.toggle("none");
            },
            chooseMember: function (value, event) {
                this.openSelect({
                    target: event.target.parentNode.parentNode,
                });
                this.$dispatch("chooseMemberResult", {
                    kind: this.value,
                    selected: value,
                });
            }
        },
    }
</script>

<style>
    #send_single_selected .selected {
        position: relative;
        border: 1px solid #ccc;
        cursor: pointer;
        height: 33px;
        line-height: 33px;
        padding-left: 10px;
    }
    #send_single_selected > img {
        position: absolute;
        width: 15px;
        right: 15px;
        top: 39px;
    }
    #send_single_selected .show-block {
        display: inline-block;
    }
    #send_single_selected .select {
        width: 95%;
        padding-left: 2%;
        box-sizing: border-box;
    }
    #send_single_selected .selected-detail {
        max-height: 180px;
        border-right: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        position: absolute;
        width: 598px;
        background: white;
        overflow-x: hidden;
        box-shadow: -5px 0 20px #e0e0e0;
    }
    #send_single_selected .notify-level {
        padding-left: 2%;
        line-height: 40px;
    }
</style>